<!--
 * @Description: 
 * @Version: 2.0
 * @Author: AICHEN
 * @Date: 2023-02-09 20:35:04
 * @LastEditors: AICHEN
 * @LastEditTime: 2023-02-26 19:05:38
-->
<template>
    <div class="container">
        <div class="top">
            <div>
                <el-row :gutter="20">
                    <!-- 添加信息按钮 -->
                    <el-col :span="8">
                        <div class="grid-content"> <el-button type="primary"
                                @click="info({ title: '', type: '', content: '' })">添加信息</el-button>
                        </div>
                    </el-col>
                    <!-- 关键字搜索 -->
                    <el-col :span="16">
                        <div class="grid-content">
                            <div>
                                <el-input v-model="data.key" placeholder="输入标题关键字">
                                    <template #append>
                                        <el-button :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 表格区 -->
        <div class="mid">
            <div>
                <el-table :data="data.tableData" style="width: 100%">
                    <el-table-column prop="id" label="编号" width="120" />
                    <el-table-column prop="title" label="标题" width="120" />
                    <el-table-column prop="type" label="类型" width="120" />
                    <el-table-column prop="content" label="内容" width="600" />
                    <el-table-column fixed="right" label="Operations" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="info(scope.row)">编辑</el-button>
                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled"
                                icon-color="#626AEF" title="确定删除?" @confirm="confirmEvent(scope.row.id)">
                                <template #reference>
                                    <el-button link type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页区 -->
        <div class="bottom">
            <el-pagination v-model:current-page="data.current" v-model:page-size="data.size" :page-sizes="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="data.count" />
        </div>

        <!-- 信息编辑框 -->
        <div class="dialog">
            <el-dialog v-model="data.vis" title="添加或修改疫情" width="30%" :before-close="handleClose">
                <div>
                    <el-form :model="data.form" label-width="120px">
                        <el-form-item label="标题">
                            <el-input v-model="data.form.title" />
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-input v-model="data.form.type" />
                        </el-form-item>
                        <el-form-item label="内容">
                            <el-input v-model="data.form.content" />
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="data.vis = false">取消</el-button>
                        <el-button type="primary" @click="onSubmit">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>

        </div>
    </div>
</template>
<script setup lang='ts'>
import { watch, reactive, onMounted, ref, toRaw } from 'vue';
import { YiQingModel } from '@/api/yiqing/types';
import { addYiQing, deleteYiQing, getCount, getPageData } from '@/api/yiqing';
import { Search } from '@element-plus/icons-vue'
import { ApiResponse } from '@/api/types';
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';

interface PageType {
    current: number,
    size: number,
    key: string,
    count: number,
    tableData: Array<YiQingModel>,
    form: YiQingModel,
    vis: boolean
}

const pageSize = [10, 20, 30, 40];

// 数据定义
const data = reactive<PageType>({
    current: 1,
    size: pageSize[0],
    key: "",
    count: 0,
    tableData: [],
    form: {} as YiQingModel,
    vis: false
})



// 生命周期函数 钩子函数
onMounted(() => {
    reflush();
})

// 刷新数据 当条件变化时就需要重新申请数据
const reflush = () => {
    getPageData(data.current, data.size, data.key).then((res: ApiResponse<Array<YiQingModel>>) => {
        data.tableData.length = 0;
        data.tableData.push(...res.data)
    })
    getCount(data.key).then((res: ApiResponse<number>) => {
        data.count = res.data;
    })
}

// 点击事件
const info = (scope: YiQingModel) => {
    console.log(scope);
    data.form.id = scope.id
    data.form.title = scope.title
    data.form.type = scope.type
    data.form.content = scope.content
    data.vis = true;
}

// 二次确定事件
const confirmEvent = (id: number) => {
    deleteYiQing(id).then((res: ApiResponse<boolean>) => {
        if (res.data) {
            ElMessage(res.message)
            reflush();
        }
    })
}

// 表单提交事件
const onSubmit = () => {

    addYiQing({ ...toRaw(data.form) })
        .then((res: ApiResponse<boolean>) => {
            console.log("res", res.data);
            if (res.data) {
                ElMessage(res.message)
                reflush()
            }
        }).finally(() => {
            data.vis = false
        })

}

// 点击空白取消
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定取消添加?')
        .then(() => {
            done()
        })
}

// 监听数据变化
watch([() => data.current, () => data.size, () => data.key], () => {
    reflush();
})


</script>


<style  scoped></style>